<template>
    <ElMenu mode="horizontal" :active-name="currentActiveNav" @select="tolink">
        <ul class="main-nav-item">
            <li class="ivu-menu-item" v-for="item in nav" :key="item.name"
                :class="{ 'ivu-menu-item-active': currentActiveNav === item.name }">
                <a @click.prevent="tolink(item.name)">{{ item.meta.title }}</a>
            </li>
        </ul>
    </ElMenu>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
const props = defineProps({
    nav: {
        type: Array,
        default: () => []
    },
    activeNav: {
        type: String,
        required: true
    }
});
const currentActiveNav = ref(props.activeNav); // 使用 ref 来管理激活的导航项
const router = useRouter();

const tolink = (name) => {
    currentActiveNav.value = name; // 更新激活的导航项
    router.push({ name });//路由切换

};
</script>

<style lang="scss" scoped>
/* 可以在此添加样式 */
.main-nav-item {

    height: 4rem;
    line-height: 2rem;
    padding: 0; // 确保无内边距
    margin-top: 1rem; // 确保无外边距
    list-style: none; // 移除默认列表样式

    .ivu-menu-item {
        position: absolute;
        color: #fff;
        overflow-y: hidden;
        overflow-x: visible;
        background: url('../../assets/img/images/nav_bg.png') no-repeat center;

        background-size: 100% 100%;
        border: none;
        padding: 0 3rem;
        font-size: 1.4rem;

        &:hover,
        &.ivu-menu-item-active {
            border-width: 1px;
            color: #fff;
            border: none;
            background: url('../../assets/img/images/nav_bg_cur.png') no-repeat center;
            background-size: 100% 100%;
            cursor: pointer;
            /* 设置鼠标样式为小手 */
        }

        /* 位置设置 */
        &:nth-of-type(1) {
            left: 1rem;
        }

        &:nth-of-type(2) {
            left: 15rem;
        }

        &:nth-of-type(3) {
            right: 15rem;
        }

        &:nth-of-type(4) {
            right: 1rem;
        }

    }
}
</style>